<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initail-scale=1">
	<title>首页</title>
	<link rel="stylesheet" href="./adapter.css">
	<link rel="stylesheet" href="./normalize.css">
	<link rel="stylesheet" href="./iconfont.css">
	<style>
	/* 全局样式 */
	ul,li,p {
		margin: 0;
		padding: 0;
	}
	a {
		text-decoration: none;
		color: #000;
	}
	li {
		list-style: none;
	}
	/*头部导航条*/
	.headerbar{
		width: 100%;
		height: 3rem;
		background-color: #26b53e;
		position: fixed;
		top: 0;
		z-index: 999;
		text-align: center;
		line-height: 3rem;
	}
	.headerbar a {
		color: #fff;
		font-size: 1rem;
	}
	.return {
		position: absolute;
		left: 0.67rem;
	}
	/* 个人资料 */
	.personal {
		margin-top: 3.1rem;
		overflow: hidden;
	}
	.login {
		background-color: #26b53e;
		padding: 0.67rem;
		display: flex;
	}
	.login img {
		width: 4rem;
		height: 4rem;
		border-radius: 2rem;
		background-color: #ccc;
	}
	.login a:nth-child(2) {
		margin-left: 0.67rem;
		flex: 1;
		position: relative;
	}
	.login .content {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.login .content p {
		line-height: 2rem;
		color: #fff;
	}
	.login .content p:nth-child(1) {
		font-size: 1rem;
	}
	.login .content p:nth-child(2) {
		font-size: 0.88rem;
	}
	.login .rigth {
		color: #fff;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.count {
		width: 100%;
		display: flex;
	}
	.count a {
		flex: 1;
		text-align: center;
	}
	.count div {
		padding: 1rem 0;
	}
	.count p {
		line-height: 1.5rem;
	}
	.count-c {
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
	}
	.count-l span:nth-child(1) {
		font-size: 2rem;
		color: #efbf21;
	}
	.count-c span:nth-child(1) {
		font-size: 2rem;
		color: #ef5c21;
	}
	.count-r span:nth-child(1) {
		font-size: 2rem;
		color: #99ef21;
	}
	.line {
		width: 100%;
		height: 0.75rem;
		background-color: #eee;
	}
	.option {
		overflow: hidden;
	}
	.option a {
		display: block;
		position: relative;
		padding: 0.67rem;
	}
	.option .right {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0.67rem;
		font-size: 2rem;
		color: #aaa;
	}
	.option .market {
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}
	.service {
		border-bottom: 1px solid #eee;
	}
	.icon-right {
		font-size: 2.5rem;
	}
	/* 底部导航栏 */
	.footerbar {
		width: 100%;
		height: 3rem;
		background-color: #26b53e;
		position: fixed;
		bottom: 0;
		display: flex;
		z-index: 999;
	}
	.footerbar a {
		flex: 1;
		position: relative;
		color: #000;
		font-size: 0.8rem;
		font-weight: 800;
	}
	.footerbarItem {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.footerbarLine {
		width: 100%;
		height: 3px;
		background-color: #fff;
		position: fixed;
		bottom: 3rem;
		z-index: 999;
	}
	.footerbarItem p {
		text-align: center;
		font-size: 1.5rem;
		color: #ccc;
	}
	</style>
</head>
<body>
	<!-- 头部导航条 -->
	<div class="headerbar">
		<a href="#" class="header-c">我的</a>
	</div>
	<!-- 个人资料 -->
	<div class="personal">
		<div class="login">
			<a href="">
				<img src="../static/imgs/头像.png" alt="">
			</a>
			<a href="">
				<div class="content">
					<p>登陆/注册</p>
					<p>暂时无绑定手机号</p>
				</div>
				<div class="rigth iconfont icon-right"></div>
			</a>
		</div>
		<div class="count">
			<a href="">
				<div class="count-l">
					<p><span>0.00</span><span>元</span></p>
					<p>我的余额</p>
				</div>
			</a>
			<a href="">
				<div class="count-c">
					<p><span>0</span><span>个</span></p>
					<p>我的优惠</p>
				</div>
			</a>
			<a href="">
				<div class="count-r">
					<p><span>0</span><span>分</span></p>
					<p>我的积分</p>
				</div>
			</a>
		</div>
		<div class="line"></div>
		<div class="option">
			<div class="order">
				<a href="">
					<span>我的订单</span>
					<div class="right iconfont icon-right"></div>
				</a>
			</div>
			<div class="market">
				<a href="">
					<span>积分商城</span>
					<div class="right iconfont icon-right"></div>
				</a>
			</div>
			<div class="member">
				<a href="">
					<span>会员中心</span>
					<div class="right iconfont icon-right"></div>
				</a>
			</div>
		</div>
		<div class="line"></div>
		<div class="option">
			<div class="service">
				<a href="">
					<span>服务中心</span>
					<div class="right iconfont icon-right"></div>
				</a>
			</div>
		</div>
	</div>
	<!-- 底部导航栏 -->
	<div class="footerbarLine"></div>
	<div class="footerbar">
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-shouye"></p><span>首页</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-search"></p><span>搜索</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-danlieliebiao"></p><span>订单</span></div></a>
		<a href="#"><div class="footerbarItem"><p class="iconfont icon-account"></p><span>我的</span></div></a>
	</div>
</body>
</html>